<template>
  <div class="jump-wrapper">
    <div class="content">
      <div class="left">
        <img src="./download_pattern_left.png" alt="">
      </div>
      <div class="right">
        <img src="./download_pattern_right.png" alt="">
      </div>
      <div class="icon">
        <div class="icon-wrapper">
          <img src="./logo.png" width="120" height="120" alt="">
        </div>
        <p class="text">
          <img src="./android.png" alt="">
          <span>红米竞猜</span>
        </p>
        <div class="button-wrapper">
          <button class="btn" :class="{'downing': isDown}" @click="down">下载安装</button>
        </div>
      </div>
    </div>
    <div class="jump" v-show="jumpFlag" @click="jumpFlag = false;">
      <img src="./arrow.png">
      <p class="text">请在其他浏览器打开下载页</p>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'jump',
    data () {
      return {
        jumpFlag: false,
        isDown: false
      }
    },
    methods: {
      isWeixin () {
        let agent = navigator.userAgent.toLowerCase();
        /* eslint-disable */
        if (agent.match(/MicroMessenger/i) == "micromessenger") {
          return true;
        } else {
          return false;
        }
      },
      down () {
        if (this.isWeixin()) {
          this.jumpFlag = true;
          return false;
        }

        // 显示正在下载类名
        this.isDown = true;

        // 下载
        window.location.href = this.$android;
      }
    }
  }
</script>

<style scoped>
  .jump-wrapper {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
  }
  .jump-wrapper .content {
    position: relative;
    height: 100%;
    overflow: hidden;
  }
  .content .left {
    position: absolute;
    top: 0;
    left: 0;
    width: 18%;
  }
  .content .right {
    position: absolute;
    top: 0;
    right: 0;
    width: 18%;
  }
  .content .left img, .content .right img {
    width: 100%;
  }
  .icon {
    margin-top: 46%;
    text-align: center;
  }
  .icon .icon-wrapper {
    width: 120px;
    height: 120px;
    border-radius: 20px;
    overflow: hidden;
    margin: 0 auto;
  }
  .icon .text {
    margin-top: 20px;
    font-size: 24px;
    color: #505556;
  }
  .icon .text img {
    width: 30px;
    height: 30px;
    vertical-align: middle;
  }
  .icon .text span {
    display: inline-block;
    vertical-align: middle;
  }
  .button-wrapper {
    padding: 50px;
    text-align: center;
  }
  .button-wrapper .btn {
    width: 100%;
    height: 46px;
    color: #fff;
    font-size: 14px;
    line-height: 16px;
    background-color: #32b2a7;
    border-radius: 23px;
    box-sizing: border-box;
  }
  .button-wrapper .btn.downing {
    width: 46px;
    background-color: #fff;
    border: 2px solid #32b2a7;
    border-top-color: #fff;
    font-size: 0;
    animation: rotate infinite 1s linear;
    -webkit-animation: rotate infinite 1s linear;
  }
  @-webkit-keyframes rotate {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg)
    }
  }
  @keyframes rotate {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg)
    }
  }
  .jump {
    position: absolute;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .jump img {
    position: absolute;
    top: 0;
    right: 15px;
    width: 60%;
  }
  .jump .text {
    position: absolute;
    top: 40%;
    width: 100%;
    color: #fff;
    font-size: 18px;
    text-align: center;
  }
</style>
